<%--
  Created by IntelliJ IDEA.
  User: 浅汐
  Date: 2020/11/24
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./字体/css/all.css">
    <link rel="stylesheet" href="css/cat.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/register.css">



    <script>
        window.onload=function(){
            var img=document.querySelectorAll(".showphoto img");
            var circle=document.querySelectorAll(".circle");
            var timer;
            var num=0;
            setIndex(0);
            autoChange();
            for(var i=0;i<circle.length;i++){
                circle[i].num=i;
                circle[i].onclick=function(){
                    num=this.num;
                    clearInterval(timer);
                    autoChange();
                    // setIndex(this.num);
                }
            }

            function autoChange() {
                timer=setInterval(function () {
                    setIndex(num);
                    num++;
                    num %= img.length;
                }, 2000);
            }


            function setIndex(x){
                for(var j=0;j<img.length;j++){
                    if(j==x) img[j].style.display="block";
                    else img[j].style.display="none";
                }
                for(var j=0;j<circle.length;j++){
                    if(j==x){
                        circle[j].style.border="rgb(238, 217, 220) 2px solid";
                        circle[j].style.backgroundColor="white";
                    }
                    else{
                        circle[j].style.border="";
                        circle[j].style.backgroundColor="";
                    }
                }
            }

            var login=document.getElementsByClassName("login");
            if ((String)(${sessionScope.get("name")})!=null){
                login.innerHTML=${sessionScope.get("name")}+"已登录";
            }else{
                login.innerHTML="登录";
            }

            <%--if( ${sessionScope.get("name")}!=null){--%>
            <%--    login.innerHTML=${sessionScope.get("name")}+"已登录";--%>
            <%--}else{--%>
            <%--    login.innerHTML="登录";--%>
            <%--}--%>



            function currentStyle(thing, name) {
                if (window.getComputedStyle) return getComputedStyle(thing, null)[name];
                else return thing.curentStyle[name];
            }
        }
    </script>
</head>

<body>
<div class="head clearfix">
    <div class="head-main center clearfix">
        <!-- 这个图片链接点击进行刷新 -->
        <a href="PetHouse.jsp" class="logo1"><img src="./img/logo1.png" alt="" class="logo1-img"></a>
        <a href="javascript:;" class="logo2"><img src="./img/logo2.png" alt="" class="logo2-img"></a>

        <form class="info" action="../src/LoginServlet.java">
            <input type="text" class="info-inp">
            <button type="submit" class="info-but">
                <i class="fas fa-search"></i>
            </button>
        </form>

        <a href="login.jsp">
            <button class="login">
                ${sessionScope.get("name")}
                登录
            </button>
        </a>
        <a href="invalidate.go">
            <button class="invalidate">
                注销
            </button>
        </a>
    </div>
</div>
<div class="banner clearfix">
    <a href="javascript:;">
        <!-- <img src="./img/banner.png" alt=""> -->
    </a>
</div>
<div class="nav clearfix">
    <div class="nav-main center clearfix">
        <div class="house">
            <a href="javascript:;">
                <i class="fas fa-warehouse"></i>
                <div>
                    首页
                </div>
            </a>
        </div>
        <div class="dog nav-item">
            <a href="javascript:;">
                <i class="fas fa-dog"></i>
                <div>
                    狗狗
                </div>
            </a>
        </div>
        <div class="cat nav-item">
            <a href="javascript:;">
                <i class="fas fa-cat"></i>
                <div>
                    猫咪
                </div>
            </a>
        </div>
        <div class="fish nav-item">
            <a href="javascript:;">
                <i class="fas fa-fish"></i>
                <div>
                    水族
                </div>
            </a>
        </div>
        <div class="pet nav-item">
            <a href="javascript:;">
                <i class="fas fa-dragon"></i>
                <div>
                    小宠
                </div>
            </a>
        </div>
        <div class="reptile nav-item">
            <a href="javascript:;">
                <i class="fas fa-otter"></i>
                <div>
                    爬虫
                </div>
            </a>
        </div>
        <div class="store nav-item">
            <a href="javascript:;">
                <i class="fas fa-store fin"></i>
                <div>
                    宠物商城
                </div>
            </a>
            <div class="store-hide">
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>
